/**
 * Created by kenan on 2015/12/20.
 */
//window.onload = function(){
//	var aBtn = document.getElementsByTagName("button");
//	var oDivContent = document.getElementById("tabContent");
//	var oContentItem = oDivContent.getElementsByTagName("div");
//
//	//console.log(oContentItem);
//	//console.log(aBtn);
//	for(var i=0; i< aBtn.length; i++){
//		//console.log(aBtn);
//		aBtn[i].index = i;
//		aBtn[i].onclick = function(){
//			for(var i=0; i< aBtn.length; i++){
//				aBtn[i].className = "";
//				oContentItem[i].style.display = "none";
//			}
//			this.className = "active";
//			oContentItem[this.index].style.display = "block";
//			oContentItem[this.index].className = "active";
//		};
//	}
//};

//面向对象改写过程如下：

//1、抽出公共部分代码

//var aBtn;
//var oDivContent;
//var oContentItem;
//window.onload = function() {
//	 aBtn = document.getElementsByTagName("button");
//	 oDivContent = document.getElementById("tabContent");
//	 oContentItem = oDivContent.getElementsByTagName("div");
//
//	initial();
//};
//
//function initial(){
//	for(var i=0; i< aBtn.length; i++) {
//		aBtn[i].index = i;
//		aBtn[i].onclick = tabSwitch;
//	}
//}
//
//function tabSwitch() {
//	for (var i = 0; i < aBtn.length; i++) {
//		aBtn[i].className = "";
//		oContentItem[i].style.display = "none";
//	}
//	this.className = "active";
//	oContentItem[this.index].style.display = "block";
//	oContentItem[this.index].className = "active";
//}

//2、面向对象
//var aBtn;
//var oDivContent;
//var oContentItem;
window.onload = function () {
	var tab1 = new tab();
	tab1.initial();
};

function tab() {
	aBtn = document.getElementsByTagName("button");
	oDivContent = document.getElementById("tabContent");
	oContentItem = oDivContent.getElementsByTagName("div");
}
tab.prototype.initial = function () {
	var This = this;
	for (var i = 0; i < aBtn.length; i++) {
		aBtn[i].index = i;
		aBtn[i].onclick = function () {
			This.tabSwitch(this);
		}
	}
};
tab.prototype.tabSwitch = function (obj) {
	for (var i = 0; i < aBtn.length; i++) {
		aBtn[i].className = "";
		oContentItem[i].style.display = "none";
	}
	obj.className = "active";
	oContentItem[obj.index].style.display = "block";
	oContentItem[obj.index].className = "active";
};